<script setup lang="ts"> 
import { reactive, ref, defineProps, defineExpose } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
function changeDialogVisible(val: boolean) {
  dialogVisible.value = val
}
defineExpose({
  changeDialogVisible
})
const props= defineProps({
    username:null
})
const ruleFormRef = ref<FormInstance>()
  const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码!'))
  } else if (!/[0-9a-zA-Z]$/.test(value)) {
    callback(new Error('密码  只能是数字或字母!'))
  }
  else if (!/^(?=.*[0-9])(?=.*[a-zA-Z]).{8,16}$/.test(value)) {
    callback(new Error('密码必须包含字母、数字,长度为8-16!'))
  } else {
    if (ruleForm.passwordOk !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码!'))
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}


const ruleForm = reactive({
  username:props.username,
  password: '',
  passwordOk: '',
})
const dialogVisible = ref(false)
const rules = reactive<FormRules<typeof ruleForm>>({
  password: [{ validator: validatePass, trigger: 'blur' }],
  passwordOk: [{ validator: validatePass2, trigger: 'blur' }],
})
import { ElMessage } from 'element-plus'
import { updatePassword } from '@/apis/user.js'
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      //提交 请求
      const res= await updatePassword(ruleForm)
      console.log(res.data.code);
      if(res.data.code===0){
       ElMessage.error(res.data.msg)
        return
      }
      dialogVisible.value=false
      ElMessage.success("修改成功")
      //刷新页面
      location.reload()
      
      resetForm(formEl)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
function cancel(){
  dialogVisible.value=false
  resetForm(ruleFormRef.value)
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<template>
  <div>
   <!-- 弹窗 -->
  <el-dialog v-model="dialogVisible"  :show-close="false" title="修改密码"  :close-on-click-modal="false" width="20%">
    <el-card>
      <el-form ref="ruleFormRef" style="max-width: 300px" :model="ruleForm" status-icon :rules="rules"
        label-width="auto" class="demo-ruleForm">
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="passwordOk" type="password">
          <el-input v-model="ruleForm.passwordOk" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item style="margin-left: 40px;">
          <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
          <el-button type="primary" @click="cancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-dialog>
 </div>
</template>